<template>
  <!-- 公司新闻 -->
  <div class="play-wrapper">
    <!-- <a-carousel effect="scrollx" dots-class="dotsClass" :after-change="afterPlayChanged">
      <div v-for="item in newsList" :key="item.id" class="play-item-box">
        <div class="play-item-img">
          <img
            :src="item.poster"
            alt="加载..."
          >
        </div>
        <div class="play-item-article">
          <div class="article-title">
            {{ item.title }}
          </div>
          <div class="article-content">
            <Ellipsis :length="150">
              {{ item.content }}
            </Ellipsis>
          </div>
        </div>
      </div>
    </a-carousel> -->
    <!-- <NewsPlayer dots-class="dotsClass" :itemList="newsList" >
      <template v-slot:content="{data}" >
      <div :key="data.id" class="play-item-box">
        <div class="play-item-img">
          <img :src="data.poster" alt="加载..." />
        </div>
        <div class="play-item-article">
          <div class="article-title">
            {{ data.title }}
          </div>
          <div class="article-content">
            <Ellipsis :length="150">
              {{ data.content }}
            </Ellipsis>
          </div>
        </div>
      </div>
      </template>
    </NewsPlayer>
    <div class="more-box base-btn" @click="toMore">
      <span>更多新闻 ></span>
    </div> -->
    <a-row> 
      <a-col v-loading="loading.focus" :span="16">
        <!-- 置顶轮播新闻 -->
        <NewsPlayer ref="newsPlayer" dots-class="dotsClass" :itemList="focusNews">
          <template v-slot:content="{ data, index }">
            <div :key="data.id" class="play-item-box" @click="handleView(data)">
              <div class="play-item-img">
                <img :src="data.imgUrl" alt="加载失败..." />
                <div class="play-item-title">
                  <!-- 正常居中标题 -->
                  <span
                    :style="{
                      height: !isScroll[index] ? 'auto' : 0,
                      visibility: !isScroll[index] ? 'visible' : 'hidden'
                    }"
                    :ref="'titleBox_' + data.id"
                    style="display: inline-block"
                  >{{ data.title }}</span
                  >
                  <!-- 滚动标题 -->
                  <vue-seamless-scroll
                    v-if="!!isScroll[index]"
                    :key="data.id"
                    :data="[data.title]"
                    class="play-item-title-scoll"
                    :class-option="classOption"
                  >
                    <div style="padding-right: 30px">{{ data.title }}</div>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
          </template>
        </NewsPlayer>
        <!-- 空白提示 -->
        <a-empty v-if="!focusNews || focusNews.length === 0" description="暂无更多置顶新闻" class="mt20"></a-empty>
      </a-col>
      <!-- 所有已发布新闻 -->
      <a-col :span="8">
        <div class="news-box">
          <!-- 滚动容器 -->
          <div class="news-content" @scroll="handleScroll" v-loading="loading.news && !newsList.length">
            <!-- 新闻列表 -->
            <div>
              <div class="news-item" v-for="item in newsList" :key="item.id" @click="handleView(item)">
                <div class="news-item-title-box ellipsis_text_2">
                  <span>【{{ filterLabel(item.type, 'type') }}】</span>
                  <span class="news-item-title">{{ item.title }}</span>
                </div>
                <div class="news-item-views-box">
                  <a-row type="flex" style="flex-shrink: 0">
                    <a-icon type="eye" theme="filled" style="padding: 4px 3px 0 0; color: #9a9a99" />
                    {{ item.readingQuantity || 0 }}
                  </a-row>
                  <span class="ellipsis_text_1">{{ item.releaseTime }}</span>
                </div>
              </div>
            </div>
            <!-- 加载提示 -->
            <div v-if="newsList && newsList.length" align="center" style="padding: 12px 0">
              <template v-if="total > newsList.length"> <a-icon type="loading" />加载中</template>
              <span v-else>已加载全部</span>
            </div>
            <!-- 空白提示 -->
            <a-empty v-if="!newsList || newsList.length === 0" description="暂无更多新闻" class="mt20"> </a-empty>
          </div>
        </div>
         <div class="news-header">
            <div class="news-header-title"><span></span></div>
            <h5 @click="$router.push({ path: '/partyMasses/partyManage/newsManage/releasedNews' })">
              <a>查看全部</a><a-icon type="right" />
            </h5>
          </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import NewsPlayer from './NewsPlayer'
import Ellipsis from '@/components/Ellipsis'
import vueSeamlessScroll from 'vue-seamless-scroll'
import {
  getList,
  getHomePageNews,
  increaseReadingQuantity,
  getContentById
} from '@/api/partyMasses/partyManage/newsManage.js'
import { Empty } from 'ant-design-vue'
import { NEWS_TYPE } from '@/views/partyMasses/partyManage/newsManage/model'

export default {
  name: 'CompanyNews',
  components: {
    Ellipsis,
    NewsPlayer,
    vueSeamlessScroll,
    AEmpty: Empty
  },
  data() {
    return {
      isScroll: [], // 置顶新闻标题是否滚动的枚举
      isfinish: true, // 设置标题类型是否结束
      pageNum: 1, // 页码
      total: 0, // 总数
      focusNews: [], // 置顶新闻列表
      newsList: [], // 所有新闻列表
      loading: {
        focus: false, // 置顶
        news: false // 所有
      }, // 新闻请求加载loading
      currentNewsIndex: 0 // 当前轮播展示的新闻下标
    }
  },
  computed: {
    // 无缝滚动配置项
    classOption() {
      return {
        limitMoveNum: 1, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  mounted() {
    // 初始化页面
    this.init()
    // 注册窗口缩放监听,用来设置标题类型
    window.addEventListener('resize', this.setTitleType)
  },
  beforeDestroy() {
    // 移除窗口缩放监听
    window.removeEventListener('resize', this.setTitleType)
  },
  methods: {
    /**
     * @description: 设置标题类型
     */
    setTitleType() {
      // 上一次未完成则取消设置
      if (!this.isfinish) {
        return
      }
      this.isfinish = false
      // 设置标题为滚动或者普通居中
      this.$nextTick(() => {
        // 遍历置顶新闻
        for (let index in this.focusNews) {
          let item = this.focusNews[index]
          // 当标题宽度大于容器宽度时，则滚动显示，否则正常居中显示
          this.$set(
            this.isScroll,
            index,
            this.$refs['titleBox_' + item.id]?.clientWidth >= this.$refs.newsPlayer?.$el?.clientWidth
          )
          // console.log(this.$refs['titleBox_' + item.id]?.clientWidth, this.$refs.newsPlayer?.$el?.clientWidth)
        }
        this.isfinish = true
      })
    },
    /**
     * @description: 滚动监听
     * @param {Object} e：滚动对象
     */
    handleScroll(e) {
      const target = e.target
      // 请求条件：1、上一次请求已结束时，2、当滚动快到底部，3、新闻总数大于列表数;
      if (
        !this.loading.news &&
        target.scrollHeight <= target.scrollTop + target.offsetHeight + 10 &&
        this.total > this.newsList?.length
      ) {
        // 页码加一
        this.pageNum++
        // 请求新闻
        this.getNews()
      }
    },
    /**
     * 过滤类别
     */
    filterLabel(val, key) {
      const keyMap = {
        type: NEWS_TYPE
      }
      return (keyMap[key] && keyMap[key][val]) || ''
    },
    /**
     * @description: 获取所有已发布新闻
     */
    getNews() {
      // 参数配置
      const requestParameters = {
        pageNum: this.pageNum,
        pageSize: 10,
        param: { releaseStatus: 1 }
      }
      this.loading.news = true
      // 请求已发布新闻列表
      getList(requestParameters)
        .then((res) => {
          this.loading.news = false
          if (res.code === 200) {
            let list = res.data?.list || []
            this.newsList = this.pageNum === 1 ? list : this.newsList.concat(list)
            this.total = res.data?.total
          } else {
            // 请求数据失败则减页码
            this.pageNum--
          }
        })
        .catch(() => {
          this.loading.news = false
          // 请求数据失败则减页码
          this.pageNum--
        })
    },
    /**
     * @description: 获取置顶新闻
     */
    getTopNews() {
      this.loading.focus = true
      // 请求置顶新闻列表
      getHomePageNews()
        .then((res) => {
          this.loading.focus = false
          if (res.code === 200) {
            // 格式化图片
            res.data.forEach((item) => {
              let mainImg = item.list?.find((i) => i.main) // 主图
              // 判断主图为文件系统图片还是网络图片
              item.imgUrl = mainImg ? (mainImg.commonId ? this.$fileUrl(mainImg) : mainImg.fileId) : ''
            })
            this.focusNews = res.data
            // 设置标题类型
            this.setTitleType()
          }
        })
        .catch(() => {
          this.loading.focus = false
        })
    },
    /**
     * @description: 初始化页面
     */
    init() {
      // 请求已发布新闻列表
      this.getNews()
      // 请求置顶新闻列表
      this.getTopNews()
    },
    /**
     * @description: 打开新闻详情
     * @param {*} data：新闻对象
     */
    async handleView(data) {
      // 若查看的是oa平台则打开外部链接
      if (data.sources === '2') {
        // 增加阅读量
        increaseReadingQuantity({ id: data.id }).then((res) => {
          if (res.code === 200) {
            let readingQuantity = localStorage.getItem('readingQuantity') // 新闻阅读量缓存
            // 若存在新闻阅读量缓存
            if (readingQuantity) {
              readingQuantity = JSON.parse(readingQuantity)
              // 若不存在当前新闻
              if (!readingQuantity[data.id]) {
                readingQuantity[data.id] = []
              }
              readingQuantity[data.id].push(this.$userInfo()?.id)
            } else {
              // 添加当前新闻到缓存，且给当前新闻添加当前阅读者id
              readingQuantity = {
                [data.id]: [this.$userInfo()?.id]
              }
            }
            // 缓存新闻阅读
            localStorage.setItem('readingQuantity', JSON.stringify(readingQuantity))
            this.pageNum = 1
            this.getNews()
          }
        })
        const Res = await getContentById({ id: data.id })
        if (Res?.data?.code === 200) {
          window.open(Res.data.message)
        }
        return
      }
      // 跳转详情，强制打开新tab
      this.$router.push({
        path: '/partyMasses/partyManage/newsManage/newsDetail',
        query: {
          id: data.id,
          ignoreNoTab: 1,
          history: JSON.stringify([
            {
              title: '新闻列表',
              path: '/partyMasses/partyManage/newsManage/releasedNews'
            },
            {
              title: '新闻详情',
              path: '/partyMasses/partyManage/newsManage/newsDetail'
            }
          ])
        }
      })
    },
    // /**
    //  * @description: 转义颜色
    //  * @param {String} type：新闻类型
    //  * @return {String}
    //  */
    // formatColor(type) {
    //   return {
    //     1: '#0289CA',
    //     2: '#F49D44',
    //     3: '#04c5c7',
    //     4: '#4f04c7',
    //     5: '#347a18',
    //     6: '#ff3333',
    //     7: '#ecee58'
    //   }[type]
    // },
    /**
     * @description: 获取更多
     */
    toMore() {
      this.$message.warning('暂未开放')
    },
    /**
     * 轮播图翻页回调
     * @param {Number} current 当前页下标
     */
    afterPlayChanged(current) {
      this.currentNewsIndex = current
    }
  }
}
</script>

<style lang="less" scoped>
@deep: ~'>>>';
.play-wrapper {
  padding-right: 4px;
  height: 100%;
  position: relative;
  @{deep} .ant-card-body {
    padding-bottom: 0;
  }
  .more-box {
    position: absolute;
    right: -20px;
    bottom: 10px;
    width: 80px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    opacity: 1;
    background: #04c5c7;
    color: #ffffff;
    font-size: 12px;
    &::after {
      display: block;
      content: '';
      width: 0;
      height: 0;
      border-top: 5px solid #04c5c7;
      border-right: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 5px solid #04c5c7;
      position: absolute;
      right: 0;
    }
  }
}
.play-title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.play-item-box {
  display: flex !important;
  .play-item-img {
    cursor: pointer;
    flex: auto;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    // padding-bottom:258px;
    position: relative;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .play-item-title {
      position: absolute;
      transition: all 3s ease;
      width: 100%;
      height: 18%;
      bottom: 0;
      color: #fff;
      font-size: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      white-space: nowrap;
      align-items: center;
      background-color: rgba(0, 0, 0, 0.9);
      .play-item-title-scoll {
        width: 100%;
      }
    }
  }
  .play-item-article {
    width: 39%;
    .article-title {
      opacity: 1;
      font-size: 20px;
      font-weight: bolder;
      text-align: LEFT;
      color: #161616;
      line-height: 32px;
      padding-bottom: 24px;
    }
    .article-content {
      font-size: 14px;
      line-height: 24px;
      color: #666666;
      text-align: justify;
    }
  }
}

@{deep}.dotsClass {
  // width: 61% !important;
  li {
    button {
      width: 10px !important;
      height: 10px !important;
      border-radius: 50% !important;
    }
  }
}
.news-header-col{
  position: initial;
}
.news-header {
    width: 100%;
    display: flex;
    padding: 3px 0 12px;
    justify-content: space-between;
    position: relative;
    align-items: center;
    h5 {
      margin: 10px 0 0 0;
      @{deep} .a-icon {
        color: #ccc;
      }
      a{
        font-size: 14px;
        color: #0289CA;
      }
      i{
          margin-left:5px;
      }
    }
    .news-header-title {
      position: relative;
      color: #161616;
      font-weight: bolder;
      width: fit-content;
      font-size: 18px;
      span {
        position: relative;
        z-index: 2;
      }
      // &::after {
      //   z-index: 1;
      //   display: block;
      //   content: '';
      //   width: 110%;
      //   height: 10px;
      //   background: #cdf1f9;
      //   position: absolute;
      //   bottom: 0;
      // }
    }
    // &::after {
    //   display: block;
    //   content: '';
    //   width: 100%;
    //   height: 1px;
    //   background: #f3f3f3;
    //   position: absolute;
    //   bottom: 0;
    // }
  }
.news-box {
  height: 100%;
  .news-content {
     height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
    scrollbar-track-color: #fff;
    -ms-scrollbar-track-color: transparent;
    &::-webkit-scrollbar {
      background: #fff;
      width: 8px;
      height: 8px;
      // display: none;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      width: 8px;
      border-radius: 8px;
      border: 1px #fff solid;
      background: #ccc;
    }
  }
  .news-item {
    cursor: pointer;
    position: relative;
    padding: 12px 0;
    .news-item-title-box {
      font-size: 14px;
      font-weight: bold;
      span:first-child {
        color: #0289CA;
      }
      .news-item-title {
        color: #666;
      }
    }
    .news-item-views-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      font-size: 12px;
      color: #c4c5c5;
    }
    &:not(:last-child)::after {
      display: block;
      content: '';
      width: 100%;
      height: 1px;
      background: #f3f3f3;
      position: absolute;
      bottom: 0;
    }
  }
}
.ellipsis_text_1,
.ellipsis_text_2 {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
}
.ellipsis_text_1 {
  -webkit-line-clamp: 1;
  -moz-line-clamp: 1;
  line-clamp: 1;
}
.ellipsis_text_2 {
  -webkit-line-clamp: 2;
  -moz-line-clamp: 2;
  line-clamp: 2;
}
 @media screen and (min-width: 1400px) and (max-width: 1440px) {
.play-item-box {
  .play-item-img {
     //padding-bottom:200px;
  } 
   }
  }
  @media screen and (min-width: 1200px) and (max-width: 1399px) {
.play-item-box {
  .play-item-img {
     //padding-bottom:150px;
  } 
   }
  }
</style>